<template>
  <my-div style="flex:1" class="container">
    <head title="交易" :back="false">
      <!-- <div class="title" slot="title">
        <image style="width: 38px;height: 38px" src="root:img/home/search-icon@2x.png"></image>
      </div> -->
      <!-- <div slot="right" style="width: 36;height: 36">
        <image style="width: 36px;height: 36px" src="root:img/home/search-icon@2x.png"></image>
      </div> -->
    </head>
    <my-div >
       <list class="item-container" :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
              <cell>
                <wxc-pan-item :ext-id="'1'"
                  @wxcPanItemPan="wxcPanItemPan">
                <image style="width:750px;height:1000px;" :src="`root:img/${theme}/home/trade1.png`"></image>
                </wxc-pan-item>
                <!-- <wxc-pan-item :ext-id="'1'"
                  @wxcPanItemPan="wxcPanItemPan">
                  <div class="bg"></div>
                  <my-div class="content">
                      <div class="a-header">
                        <div class="a-header-left">
                          <image style="width:30px;height:30px;"  src="root:img/trade/liebiao@2x.png"></image>
                          <text style="color:rgba(60,71,98,1);font-size:36px;margin-left:10px;">btc/usdt</text>
                        </div>
                        <div class="a-header-right">
                           <image style="width:30px;height:30px;"  src="root:img/trade/change@2x.png"></image>
                           <image style="width:30px;height:30px;"  src="root:img/trade/earth@2x.png"></image>
                           <image style="width:30px;height:30px;"  src="root:img/trade/stock@2x.png"></image>
                        </div>
                      </div>
                      <div class="border_bottom"></div>
                  </my-div>
                </wxc-pan-item> -->
              </cell>
              <cell>
                <wxc-pan-item :ext-id="'1'"
                  @wxcPanItemPan="wxcPanItemPan">
                <image style="width:750px;height:950px;" :src="`root:img/${theme}/home/trade2.png`"></image>
                </wxc-pan-item>
                <!-- <div class="a-content">
                  <div class="a-content-left">
                    <div class="wrapper">
                        <div class="a-buy-btn a-btn-active">
                          <text class="a-btn-active" style="font-size:30px;line-height:60px;text-align:center">买入</text>
                        </div>
                        <div class="a-buy-btn">
                           <text style="font-size:30px;color:rgba(154,156,164,1);line-height:60px;text-align:center">卖出</text>
                        </div>
                    </div>
                    <div class="a-select">

                    </div>
                  </div>
                  <div class="a-content-right">

                  </div>
                </div> -->
              </cell>
            </list>
      <!-- <wxc-tab-page class="tab-page" ref="wxc-tab-page"
                :tab-titles="tabTitles"
                :tab-styles="tabStyles"
                :title-use-slot="true"
                :tab-page-height="tabPageHeight"
                @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
                <div slot="tab-title-0"  class="tab-item" ><text :class="[this.tab(0)]" class="tab-text">A币</text></div>
                <div slot="tab-title-1"  class="tab-item" ><text :class="[this.tab(1)]" class="tab-text">B币</text></div>
                <div slot="tab-title-2"  class="tab-item" ><text :class="[this.tab(2)]" class="tab-text">C币</text></div>
            
           
      </wxc-tab-page> -->
    </my-div>
</my-div>
</template>

<style scoped>
.container{
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 140px;
}
.border_bottom{
  width: 750px;
  height: 1px;
  background-color: rgba(233,233,233,1);
}
.main {
  flex: 1;
  background-color: #ffffff;
}
.tab-text{
  width: 210px;
  height: 60px;
  color: rgba(154,156,164,1);
  background-color:rgba(153,153,153,0.2);
  font-size: 28px;
  line-height: 60px;
  text-align: center;
  margin-left: 20px;
  border-radius: 8px;
}
.tab-item{
  width: 250px;
  height: 60px;
  margin-bottom: 20px;
}
.bar-active{
  color: rgba(70,120,245,1);
  background-color: rgba(70,120,245,0.2);
}
.item-container {
    width: 750px;
    margin-bottom: 60px;
  }

  .border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: transparent;
  }

  .cell {
    background-color: #ffffff;
  }
  .content{
    width: 690px;
    margin-left: 30px;
  }
  .a-header{
    height: 110px;
    width: 750px;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

  }
  .bg{
    width: 750px;
    height: 30px;
    background-color: #f2f3f4;
  }
  .a-header-left{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 300px;
    height: 110px;
  }
  .a-header-right{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 150px;
    height: 110px;
    position: absolute;
    right: 0;
  }
  .a-content{
    width: 690px;
    margin-left: 30px;
    margin-top: 36px;
  }
  .a-content-left{
    width: 400px;

  }
  .a-buy-btn{
    width: 200px;
    height: 60px;
    background-color: rgba(233,233,233,1);
  }
  .a-btn-active{
    color: #ffffff;
    background-color: rgba(70,120,245,1);
  }
  .wrapper{
    display: flex;
    flex-direction: row;
  }
</style>

<script>
const dom = weex.requireModule('dom');
import { WxcTabPage, WxcPanItem, Utils, BindEnv } from 'weex-ui';
const net = require('../../utils/http.js')
export default{
  components: { WxcTabPage, WxcPanItem },
    data: () => ({
      tabTitles: [{
        title: 'A币',
      },
      {
        title: 'B币',
      },
      {
        title: 'C币',
      },
      ],
      index:0,
      tabStyles: {
          bgColor: '#FFFFFF',
          titleColor: 'rgba(154,156,164,1)',
          isActiveTitleBold: true,
          width: 250,
          height: 100,
          fontSize: 28,
      },
      tabList: [],
      demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      tabPageHeight: 1334
    }),
    created () {
      this.tabPageHeight = Utils.env.getPageHeight();
      this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
      Vue.set(this.tabList, 0, this.demoList);
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const self = this;
        self.index = e.page;
        /* Unloaded tab analog data request */
        if (!Utils.isNonEmptyArray(self.tabList[self.index])) {
          setTimeout(() => {
            Vue.set(self.tabList, self.index, self.demoList);
          }, 100);
        }
      },
      wxcPanItemPan (e) {
        if (BindEnv.supportsEBForAndroid()) {
          this.$refs['wxc-tab-page'].bindExp(e.element);
        }
      },
      tab(index){
        return this.index === index ?  'bar-active':''
      }
    }
}
</script>
